import React,{Component} from 'react';
import { ListView } from 'antd-mobile';
import axios from 'axios'
import {NavLink} from 'react-router-dom'
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';

export default class Tabs3 extends React.Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2
    });
    this.state = {
      dataSource,
      list: [],
      page: 1
    };
  }

  makeRemoteRequest = ()=>{
    axios({
      url   : `http://localhost:3000/product?_page=${this.state.page}&_limit=5&_sort=id&_order=desc`,
      method: 'get'
    }).then(res=>{
      this.setState({
        list: [...this.state.list, ...res.data],
        page: this.state.page + 1
      })
    })
  }

  componentDidMount (){
    this.makeRemoteRequest();
  }

  onEndReached = (event)=>{
    this.makeRemoteRequest();
  }

  // 渲染每一行
  renderRow = (rowData,sectionID,rowID)=>{
    var productDetailUrl = `/product/${rowData.id}`
    return (

      <div key={rowID} style={{ padding: '0 15px' ,borderBottom: '1px solid #F6F6F6'}}>

        <WingBlank size="lg">
    <WhiteSpace size="lg" />
    <Card>
      <Card.Header
        title={rowData.text}
        thumb={rowData.img}
        extra={<span>{rowID}</span>}
        thumbStyle={{border:'1px solid black',borderRadius:'25px'
       }}
      />
      <Card.Body>
        <div>{rowData.content}</div>
      </Card.Body>

    </Card>
    <WhiteSpace size="lg" />
  </WingBlank>
  <NavLink> <button>购物车</button>  </NavLink>

  <NavLink to={productDetailUrl}> <button>详情页</button>  </NavLink>
        </div>

    )
  }

  render() {
    return (
      <ListView
        dataSource = {this.state.dataSource.cloneWithRows(this.state.list)}
        renderRow  = {(rowData, sectionID, rowID, highlightRow) => this.renderRow(rowData,sectionID,rowID)}
        style      = {{
          height  : document.documentElement.clientHeight - 50,
          overflow: 'auto',
        }}
        onEndReached          = {this.onEndReached}
        onEndReachedThreshold = {10}
      />
    );
  }
}